<template>
	<template v-if='loginUserInfo["userName"]'>
		<div class='index-header-container-right-flex1'>
			<n-ellipsis :line-clamp='1'>
				<span>登录用户:</span>
				<span class='nickname'>[{{ loginUserInfo['userName'] }}]</span>
				<span class='username'>{{ loginUserInfo['nickName'] }}</span>
			</n-ellipsis>
		</div>
		<div class='index-header-container-right-flex2'>
			<n-dropdown v-bind='dropdownConfig' @select='handleDropdownSelect'>
				<n-button text strong :bordered='false'>
					<template v-slot:icon>
						<ClassIcon font-size='18px' icon-class='fa fa-user'/>
					</template>
					<template v-if='!screenTooSmall'>
						个人中心
					</template>
				</n-button>
			</n-dropdown>
		</div>
		<div class='index-header-container-right-flex3'>
			<n-button text strong :bordered='false'
					  @click='logOut'>
				<template v-slot:icon>
					<ClassIcon font-size='18px'
							   icon-class='fa fa-power-off'/>
				</template>
				<template v-if='!screenTooSmall'>
					退出登录
				</template>
			</n-button>
		</div>
	</template>
	<passwordModifyModal ref='passwordModify'/>
</template>
<script lang='ts' setup>
import { defineAsyncComponent, onBeforeUnmount, onMounted, reactive, ref } from 'vue';
// axios
import axios from '@/config/axios/index.ts';
// 状态管理
import { usePermissionStore } from '@/config/pinia/permission.store.ts';
import { useCommonStore } from '@/config/pinia/common.store.ts';
import { useTabsStore } from '@/config/pinia/tabs.store.ts';
// 模态框和打印组件
import { VxeUI } from '@/config/vxe/index.ts';
import { ModalEventTypes } from 'vxe-table';
import { useRouter } from 'vue-router';
import type { JsonResultProps } from '#/JsonResult.d.ts';
import type { CommonMenuProps } from '#/Menu.d.ts';
import { DropdownProps } from 'naive-ui';
import { loginPath } from '@/config/config.ts';
import { editUserInfoPath } from '@/config/pinia/menus.store.config.ts';
const ClassIcon = defineAsyncComponent(() => import('@/components/customComponents/icon/ClassIcon.vue'));
const PasswordModifyModal = defineAsyncComponent(() => import('@/components/index/top/PasswordModifyModal.vue'));
const permissionStore = usePermissionStore();
const commonStore = useCommonStore();
const tabsStore = useTabsStore();
const router = useRouter();
const dropdownConfig: DropdownProps = reactive({
	animated : true,
	trigger  : 'hover',
	options  : [
		{
			key   : 'editPassword',
			label : '修改密码'
		},
		{
			key   : 'editUserInfo',
			label : '信息维护'
		}
	],
	size     : 'large'
});
const passwordModify = ref<any>();
// 登录用户信息
const loginUserInfo = reactive({
	id             : null,
	userName       : null,
	nickName       : null,
	needChangePwd  : null,
	idCard         : null,
	phone          : null,
	email          : null,
	address        : null,
	pictureKey     : null,
	failLoginCount : null,
	status         : null,
	lastLoginTime  : null,
	remark         : null
});
let screenTooSmall = ref(false);
let innerWidth = (event: UIEvent) => {
	screenTooSmall.value = 700 >= window.innerWidth;
};
onMounted(() => {
	window.addEventListener('resize', innerWidth);
	initUserInfo();
});
onBeforeUnmount(() => {
	window.removeEventListener('resize', innerWidth);
});
const initUserInfo = () => {
	// 通过服务器获取当前用户信息
	axios<any, JsonResultProps<any>, any>({
		method : 'GET',
		url    : '/user/userInfo'
	}).then((jsonResult: JsonResultProps<any>) => {
		if (jsonResult['status']) {
			permissionStore.setRoleList(jsonResult.data.roleCodeList);
			// 成功获取用户数据,数据合并
			Object.assign(loginUserInfo, jsonResult['data']);
			if ('1' === loginUserInfo['needChangePwd']) {
				passwordModify.value.showForceChangePasswordModal();
			}
		} else {
			VxeUI.modal.message({ content : jsonResult['msg'], status : 'warning', id : 'failedMessage' });
		}
	}).catch((errorObj: unknown) => {
		console.error(errorObj);
		VxeUI.modal.message({ content : '系统异常,请稍后再试', status : 'error', id : 'errorMessage' });
	});
};
const handleDropdownSelect = (key: string | number) => {
	switch (key) {
		case 'editPassword':
			passwordModify.value.showModal();
			break;
		case 'editUserInfo':
			showEditUserInfoTab();
			break;
	}
};
const logOut = () => {
	VxeUI.modal.confirm({
		id           : 'confirmLogOut',
		content      : '您确定要退出吗?',
		title        : '确认',
		escClosable  : true,
		maskClosable : true
	}).then((type: ModalEventTypes): boolean | void => {
		if ('confirm' === type) {
			axios<any, JsonResultProps<any>, any>({
				method : 'POST',
				url    : '/auth/logOut'
			}).then((jsonResult: JsonResultProps<any>) => {
				// 无论是否成功都要退出
				commonStore.emptyStore().then((() => {
					router.push(loginPath);
				}));
			}).catch((error: unknown) => {
				console.error(error);
				router.push(loginPath);
			});
		} else {
			return false;
		}
	});
};
const showEditUserInfoTab = () => {
	const tab: CommonMenuProps = {
		id           : 'editUserInfo',
		key          : 'editUserInfo',
		menuCode     : 'editUserInfo',
		menuName     : '个人信息维护',
		menuType     : 'MENU',
		menuPath     : editUserInfoPath,
		menuIcon     : null,
		menuIconType : null,
		tabIcon      : 'fa fa-user',
		tabIconType  : 'class',
		isCache      : false,
		params       : null
	};
	tabsStore.addTab(tab);
};
</script>
<style scoped lang='scss'>
.index-header-container-right-flex1{
	height          :100%;
	width           :calc(100% / 3);
	display         :flex;
	flex-direction  :row;
	flex-wrap       :nowrap;
	justify-content :center;
	align-items     :center;
	align-content   :center;
	.nickname{
	}
	.username{
	}
}
.index-header-container-right-flex2{
	height          :100%;
	width           :calc(100% / 3);
	display         :flex;
	flex-direction  :row;
	flex-wrap       :nowrap;
	justify-content :center;
	align-items     :center;
	align-content   :center;
}
.index-header-container-right-flex3{
	height          :100%;
	width           :calc(100% / 3);
	display         :flex;
	flex-direction  :row;
	flex-wrap       :nowrap;
	justify-content :center;
	align-items     :center;
	align-content   :center;
}
</style>